
import { Component, createRef } from 'react';

class CoreSocialistValues extends Component {
    constructor(props){
        super(props);
        this.values = ['富强','民主','文明','和谐','自由','平等','公正','法治','爱国','敬业','诚信','友善']
        this.state = { 
            cursor: -1 , 
            text: '' 
        }
        this.textRef = createRef();
    }
    render(){
        const { mouse } = this.props;

        const styles = { 
            left: mouse.x, 
            top: mouse.y
        }

        return (
            <div className="core-socialist-values" onClick={ this.show }>
                <div style={ styles } ref={ this.textRef }>{ this.state.text }</div>
            </div>
        )
    }
    show = () => {
        let { cursor , text } = this.state ;
        cursor = cursor === this.values.length - 1 ? 0 : cursor + 1 ;
        text = this.values[ cursor ];
        this.setState( { cursor, text } , () => {
            const div = this.textRef.current;
            div.style.visibility = 'visible';
            setTimeout( ()=> {
                div.style.visibility = 'hidden';
            } , 1000 );
        });
    }
}

export default CoreSocialistValues ;